<template>
<div>
    <loginLogo/>
    <div class="signUp">
        <div class="signUp-head">
            <span>用户注册</span>
        </div>
        <el-form :model="Consumer" ref="Consumer" label-width="70px" class="demo-ruleForm" :rules="rules">
            <el-form-item prop="username" label="用户名">
                <el-input v-model="Consumer.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input type="password" v-model="Consumer.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="sex" label="性别">
                <el-radio-group v-model="Consumer.sex">
                    <el-radio :label="0">女</el-radio>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">保密</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="email" label="邮箱">
                <el-input v-model="Consumer.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
    <el-input v-model="Consumer.code" placeholder="输入邮箱验证码"></el-input>
  </el-form-item>
        </el-form>
        <div class="login-btn">
                <el-button  type="warning" :disabled="disable" :class="{ codeGeting:isGeting }" @click="GetCode">{{this.getCode}}</el-button>
                <el-button type="primary" @click="SignUp">确定</el-button>
            </div>
    </div>
</div>
</template>
<script>
import loginLogo from '../components/LoginLogo'
import {mixin} from '../mixins'

export default {
    mixins: [mixin],
    components: {
        loginLogo
    },
    data() {
        return {
            getCode: '获取验证码',
            isGeting: false,
            count: 60,
            disable: false,
            Consumer: {
                username: '',       //用户名
                password: '',       //密码
                sex: '',            //性别
                email: '',          //邮箱
                code:'',
            },
            cities: [],            //所有的地区--省
            rules: {
                username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
            message: "不允许输入空格等特殊符号",
            trigger: "blur",
          },

          { min: 1, max: 12, message: "1至12个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度6-12位", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern:
              /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
        // code: [
        //   { required: true, message: "请输入验证码", trigger: "blur" }
        // ],
            }               //表单提交的规则
        }        
    },
    methods:{
        //获取验证码
        GetCode(){
            
        const _this = this;
        _this.$refs.Consumer.validate((valid) => {
          if (valid) {
              var countDown = setInterval(() => {
        if (this.count < 1) {
          this.isGeting = false
          this.disable = false
          this.getCode = '获取验证码'
          this.count = 6
          clearInterval(countDown)
        } else {
          this.isGeting = true
          this.disable = true
          this.getCode = this.count-- + 's后重发'
        }
      }, 1000);
            _this.getRequest("/email/send/"+_this.Consumer.email).then((res) => {
                
            if(res.data.code == 1){
                _this.$notify({
                title: res.data.msg,
                type: 'success'
            });      
            }else{
                _this.$notify({
                title: res.data.msg,
                type: 'error'
            });
            }
        });
          }else {
            _this.$notify({
                title: '信息填写有误',
                type: 'error'
            });
            return false;
          }
          });
        },
        SignUp(){
            let _this = this;
            _this.$refs.Consumer.validate((valid) => {
          if (valid) {
            var formData = new FormData();
            formData.append('username',_this.Consumer.username);
            formData.append('password',_this.Consumer.password);
            formData.append('sex',_this.Consumer.sex);
            formData.append('email',_this.Consumer.email);
            formData.append('code',_this.getCode.code);
            // _this.postRequest("/user/register",formData).then((res) => {
                this.$axios({
					method:"post",
					url:"http://localhost:1109/user/register",
					data:_this.Consumer, 
				}).then((res)=>{
                    if(res.data.code == 1){
                        _this.$notify({
                            title: res.data.msg,
                            type: 'success'
                            });      
                            _this.Consumer = {};
                            _this.getCode ={};
                    }else{
                        _this.$notify({
                        title: res.data.msg,
                        type: 'error'
                        });
                    }
                })
                .catch(err => {
                    _this.$notify({
                        title: res.data.msg,
                        type: 'error'
                        });
                })
              }else {
            _this.$notify({
                title: '信息填写有误',
                type: 'error'
            });
            return false;
          }
          }); 
            
        },
        goback(index){
            this.$router.go(index);
        }
    }
}
</script>

<style scoped>
.codeGeting{
    background: #cdcdcd;
    border-color: #cdcdcd;
}
.signUp {
  position: absolute;
  top: 90px;
  background-color: white;
  border-radius: 10px;
  width: 370px;
  margin-left: 900px;
  margin-top: 150px;
  padding: 30px 30px;
  
}
.getCodeBox{
    width: 90px;
}
.signUp-head {
    text-align: center;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
  }

.login-btn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    
}
button {
      display: block;
      width: 50%;
    }
</style>